<template>
  <div class="app-container">
    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <el-form :model="queryParams" inline class="search-form" ref="queryRef">
        <el-form-item>
          <el-input
            v-model="queryParams.enterpriseName"
            placeholder="账户名称"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            clearable
            v-model="queryParams.systemType"
            placeholder="广告媒体"
            style="width: 180px"
          >
            <el-option
              v-for="item in bus_system_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="queryParams.oeid"
            placeholder="CID"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="handleSearch"> 查询 </el-button>
          <el-button type="info" link @click="resetSearch"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="账户充值" name="0"></el-tab-pane>
      <el-tab-pane label="账户减款" name="1"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" :loading="loading" border stripe>
      <el-table-column label="序号" width="80" type="index" />
      <el-table-column
        label="公司名称"
        min-width="140"
        align="center"
        prop="enterpriseName"
        show-overflow-tooltip
      />
      <el-table-column
        label="推广链接"
        min-width="140"
        align="center"
        prop="promotionLink"
        show-overflow-tooltip
      />
      <el-table-column
        label="CID"
        min-width="140"
        align="center"
        prop="oeid"
        show-overflow-tooltip
      />
      <el-table-column
        label="订单号"
        min-width="140"
        align="center"
        prop="mediaTransactionsNumber"
        show-overflow-tooltip
      />
      <el-table-column
        label="充值状态"
        min-width="140"
        v-if="activeName == 0"
        align="center"
        prop="approvalStatusDesc"
        show-overflow-tooltip
      />
      <el-table-column
        label="减款状态"
        min-width="140"
        align="center"
        v-if="activeName == 1"
        prop="approvalStatusDesc"
        show-overflow-tooltip
      />
      <el-table-column
        label="账户余额"
        min-width="140"
        align="center"
        v-if="activeName == 1"
        prop="amount"
      >
        <template #default="scope">
          <div>
            {{ scope.row.amount }}
            {{ selectDictLabel(bus_currency_type, currencyType) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="充值金额"
        min-width="140"
        align="center"
        v-if="activeName == 0"
        prop="projectPhaseName"
        show-overflow-tooltip
      />
      <el-table-column
        label="减款金额"
        min-width="140"
        align="center"
        v-if="activeName == 1"
        prop="projectPhaseName"
        show-overflow-tooltip
      />
      <el-table-column
        label="创建时间"
        min-width="140"
        align="center"
        prop="createTime"
        show-overflow-tooltip
      />
    </el-table>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { getTransAccountFundList } from "@/api/customer_handle/index.js";

const { proxy } = getCurrentInstance();
const { bus_system_type } = proxy.useDict("bus_system_type");

const dateRange = ref([]);
const loading = ref(false);
const tableData = ref([]);
const activeName = ref("0");
const queryRef = ref();

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    oeid: undefined,
    systemType: undefined,
    enterpriseName: undefined,
    transactionsType: "0",
  },
});

const { queryParams } = toRefs(data);

function handleSearch() {
  queryParams.pageNum = 1;
  getList();
}
function resetSearch() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleSearch();
}

const handleClick = (data) => {
  activeName.value = data.props.name;
  queryParams.transactionsType = data.props.name;
  queryParams.pageNum = 1;
  getList();
};

const getList = () => {
  loading.value = true;
  getTransAccountFundList(proxy.addDateRange(data.queryParams, dateRange.value))
    .then((res) => {
      loading.value = false;
      tableData.value = res.rows;
      total.value = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};
onMounted(() => {
  getList();
});
</script>
